<template>
  <!--  重置密码-->
  <div class="chongzhimima">
    <div class="chong-fanhui" @click="huimima()"><</div>
    <div class="chong-zi-1">重置密码</div>
    <div class="chong-zi-2">请输入 {{ phone }} 收到的短信验证码，以完成身份验证~</div>
    <div class="chong-zhong">
      <van-field v-model="code" placeholder="验证码" >
        <template #button>
          <van-button size="small" type="primary" @click.prevent="sendSmsCode" :disabled="isSmsSend">{{sendBtnText}}
          </van-button>
        </template>
      </van-field>
    </div>
    <div class="chong-xia">
      <div class="chong-xia-zi" @click.prevent="nextPage">下一步</div>
    </div>
  </div>


</template>
<script>
import axios from "axios";
export default {
  name: "ResetPassword",
  data() {
    return {
      //密码验证码显示
      isSmsSend: false,
      sendBtnText: '获取验证码',
      account: '',
      areaCode: '',
      phone: '',
      code: '',
      counter: 60,
    }
  },
  methods: {
    huimima() {
      this.$router.push({
        path: '/VerificationCodeLogin'
      })
    },
    reset() {
      this.isSmsSend = false
      this.sendBtnText = '点击发送验证码'
      if (this.timer) {
        clearInterval(this.timer)
        this.counter = 60
        this.timer = null
      }
    },

    // 倒计时
    countDown() {
      this.timer = setInterval(() => {
        this.sendBtnText = `(${this.counter}秒)后重新发送`
        this.counter--
        if (this.counter < 0) {
          this.reset()
        }
      }, 1000)
    },

    sendSmsCode() {
      // 判断手机号是否已经输入
      if (!this.account) {
        this.$notify('请输入手机号')
        return false
      }

      // 判断手机号是否符合要求
      if (this.account.length !== 11) {
        this.$notify('请输入11位手机号')
        return false
      }

      // 调用接口，发送短信验证码
      this.yzm()
      this.isSmsSend = true

      // 开始倒计时，60s之后才能再次点击
      this.countDown()
    },

    nextPage() {
      if (this.code == null) {
        this.$toast('请输入验证码');
      } else {
        this.$router.push({
          path: '/setPassword',
          query: {
            account: this.account
          }
        });
      }
    },

    yzm() {
      axios.get('http://localhost:11219/express/express/vc/' + this.account).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.$toast.success('验证码发送成功');
        } else {
          this.$toast.fail('验证码发送失败');
        }
      })
    },
  },
  created() {
    this.account = this.$route.query.account;
    this.areaCode = this.$route.query.areaCode;
    this.phone = this.areaCode + this.account.substring(0, 3) + '****' + this.account.substring(7, 11);
  },
}
</script>
<style scoped>
.chongzhimima {
  width: 100%;
  height: 100%;
  top: 0%;
  /* 固定定位 */
  position: fixed;
  margin-top: 0;
  margin-bottom: 0;
  /* border: 1px solid red; */
}

.chong-fanhui {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  font-size: 20px;
}

.chong-zi-1 {
  position: fixed;
  margin-top: 100px;
  margin-left: 40px;
  font-size: 35px;
}

.chong-zi-2 {
  width: 320px;
  float: left;
  margin-top: 155px;
  margin-left: -5px;
  font-size: 15px;
  /* 字体左对齐 */
  text-align: left;
  color: dimgrey;
  /* border: 1px solid red; */
}

.chong-zhong {
  width: 320px;
  height: 100px;
  float: left;
  margin-top: 100px;
  margin-left: 20px;
  border-bottom: 1px solid #4A9CD6;
}

.chong-xia {
  width: 320px;
  height: 45px;
  float: left;
  margin-top: 50px;
  margin-left: 20px;
  /*设置边框圆角 */
  border-radius: 30px;
  background-color: #4A9CD6;
}

.chong-xia-zi {
  float: left;
  margin-top: 10px;
  margin-left: 140px;
  color: white;
}
</style>